<script setup>
import { ref} from 'vue'
const isShow=ref(false)
const goToRoam=()=>{
	uni.navigateTo({
		url:'/pages/roam/roam'
	})
}
const play=()=>{
	isShow.value=!isShow.value
}
const pause=()=>{
	isShow.value=!isShow.value
}
</script>

<template>
	<view class="fixed" >
		<view>
			<view class="bgc" @click="goToRoam()" :class="{revolve:isShow}">
				<img src="../../static/tx.jpg">
			</view>	
			<span>Seas Of Problems</span>
			<span>-Glichery</span>
		</view>
		<view class="bofang">
			<img src="../../static/播放2.png" @click="play" v-if="!isShow"/>
			<img  src="../../static/暂停.png" @click="pause" v-else/>
			<img src="../../static/更多.png">
		</view>
	</view>
</template>



<style scoped>
.revolve{
		animation: rotate 7s linear infinite;
	}
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
		}
}	
.fixed{
	width: 100%;
	height: 50px;
	background-color: #1b1b23;
	position: fixed;
	bottom: 50px;
	left: 0;
	color:#fff;
	display: flex;
	justify-content: space-between;
	font-size:14px;
	
}
.fixed :nth-child(1){
	display: flex;
	line-height: 50px;
}
.fixed .bgc{
	margin-top: 5px;
	width: 40px;
	height: 40px;
	background-color: #343434;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	margin: auto 10px;
}
.bgc img{
	width: 30px;
	height:30px;
	border-radius: 50%;
}
.bofang{
	display: flex;
	flex-direction: row;
	margin-right: 10px;
}
.bofang img{
	margin: auto 5px;
	width: 30px;
	height:30px;
	margin-top: 10px;
}		
</style>